<!-- // 重定位Style -->
<style>
    html, body, .layui-fluid, .layui-card, .layui-card-body, .layui-col-md3, .layui-col-md9 {
        height: 98.5%;
    }

    .layui-card {
        overflow-y: scroll;
        overflow-x: hidden;
    }

    .layui-card-header.layadmin-card-header-auto {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .layui-card-body {
        padding: 0 30px;
    }

    .layui-card-header h5 {
        font-size: 16px;
    }

    .layui-card-header i.layui-icon-list {
        font-size: 22px;
        margin-top: 5px;
        position: relative;
        top: 2px;
    }

    .layui-fluid {
        padding: 15px;
        /* padding-bottom: 5%; */
    }

    .layui-card-header.layadmin-card-header-auto {
        padding-top: 15px;
        padding-bottom: 15px;
        height: auto;
    }

    .left-tab .layui-table-body {
        overflow-x: hidden;
    }

    .layui-form {
        margin-top: 0;
        width: 100%;
    }

    .layui-table-row-click {
        background-color: #e6f7ff !important;
    }

    .layui-table td, .layui-table th {
        border-right: none !important;
    }

    .table-tool {
        display: inline-flex;
        align-items: center;
        flex-wrap: wrap;
        padding: 10px 15px !important;
        width: auto;
        box-shadow: none;
    }

    .treeTable {
        border-right: 0;
    }
</style>
<style>
    .layui-bg-lignt-green {
        background-color: #b7eb8f;
    }

    .layui-bg-weight-blue {
        background-color: #91d5ff;
    }

    .layui-bg-light-blue {
        background-color: #e6f7ff;
        border-color: #91d5ff;
        color: #1890ff;
    }

    .layui-bg-green {
        background-color: #4cbfb4 !important;
    }

    .layui-badge {
        height: 25px;
        line-height: 25px;
    }
</style>
<div id="app" v-cloak="">
    <div class="layui-col-md3" style="height: calc(100vh - 70px);">
        <div class="layui-fluid">
            <div class="layui-card left-tab" style="box-shadow: none;">
                <div class="table-tool " style="border:none;padding-bottom: 0;">
                    <div class="layui-btn-group">
                        <button type="button" class="layui-btn layui-btn-sm" @click="addTab()">
                            <i class="layui-icon">&#xe654;</i>
                            {:__('添加')}
                        </button>
                        <button type="button" class="layui-btn layui-btn-sm layui-btn-warm" @click="editTab()">
                            <i class="layui-icon">&#xe642;</i>
                            {:__('修改')}
                        </button>
                        <button type="button" class="layui-btn layui-btn-sm layui-btn-danger" @click="deleteTab()">
                            <i class="layui-icon">&#xe640;</i>
                            {:__('删除')}
                        </button>
                    </div>
                    <!--                <button class="layui-btn layui-btn-danger layui-btn-sm">{:__('重载项目')}</button>-->
                </div>
                <table lay-filter="classify-table" id="classify-table"></table>
            </div>
        </div>
    </div>

    <div class="layui-col-md9" style="height: calc(100vh - 70px);box-shadow: none;">
        <!-- // 展示数据 -->
        <div class="layui-fluid">
            <div class="layui-card" style="padding: 5px 20px;">
                <!-- // 默认操作按钮 -->
                <div class="layui-card-header layadmin-card-header-auto" style="padding-left: 0;padding-bottom: 5px;">
                    <div class="layui-form layui-form-pane form-search">
                        <div class="layui-form-item">
                            <div class="layui-form-item layui-inline">
                                <label class="layui-form-label">配置名称</label>
                                <div class="layui-input-inline">
                                    <input name="menu_name" placeholder="请输入配置名称" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <!-- // 默认搜索 -->
                                <button class="layui-btn icon-btn layui-btn-sm" lay-filter="formSearch" lay-submit>
                                    <i class="layui-icon layui-icon-search"></i>
                                    {:__('搜索')}
                                </button>
                                <!-- // 打开添加页面 -->
                                <button class="layui-btn icon-btn layui-btn-sm" @click="addConfig()" lay-area="690px">
                                    <i class="layui-icon layui-icon-add-1"></i>
                                    {:__('添加')}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- // 创建数据实例 -->
                <table id="currentTable" lay-filter="currentTable"></table>
            </div>
        </div>
    </div>
</div>


<!-- // 列表编辑框 -->
<script type="text/html" id="type-btn">
    {{# if(d.type === 'radio') { }}
    <span class="layui-badge layui-bg-orange">单选框</span>
    {{# } else if(d.type === 'checkbox') { }}
    <span class="layui-badge layui-bg-green">复选框</span>
    {{# } else if (d.type === 'upload' || d.type === 'frame') { }}
    {{# if(d.upload_type === 1) { }}
    <span class="layui-badge layui-bg-light-blue">单图上传</span>
    {{# } else if(d.upload_type === 2) { }}
    <span class="layui-badge layui-bg-weight-blue">多图上传</span>
    {{# } else { }}
    <span class="layui-badge layui-bg-green">文件上传</span>
    {{# } }}
    {{# } else if (d.type === 'textarea') { }}
    <span class="layui-badge layui-bg-lignt-green">多行文本</span>
    {{# } else if (d.type === 'editor') { }}
    <span class="layui-badge layui-bg-danger">富文本</span>
    {{# } else if (d.type === 'date') { }}
    {{# if(d.date_type === 'date') { }}
    <span class="layui-badge layui-bg-light-cyan">日期</span>
    {{# } else if(d.date_type === 'time') { }}
    <span class="layui-badge layui-bg-weight-black">时间</span>
    {{# } else { }}
    <span class="layui-badge layui-bg-gray">日期时间</span>
    {{# } }}
    {{# } else { }}
    <span class="layui-badge layui-bg-green">单行文本</span>
    {{# } }}

</script>
